<template>
	<view class="container">
		<!-- 海报图 -->
		<canvas canvas-id="invitation-post" :style="{ width: '305px', height: '403px' }"></canvas>
	</view>
</template>

<script>
	export default {
		watch: {
		    'id':function(v){
		        console.log("新任务id",v)
				this.getPostUrl()
		     },
		},
		
		props: {
			//任务id
			id: {
				type: Number,
				default: 0	
			},
			//用户头像
			avatar: {
				type: String,
				default: ''	,
			},
			//任务名称 
			taskName: {
				type: String,
				default: ''	
			},
			//工作类型
			taskType: {
				type: Number,
				default: 0	
			},
			//用户名
			userName: {
				type: String,
				default: '用户名'	
			},
			//报酬
			reward: {
				type: Number,
				default: 0	
			},
			
		},
		data() {
			return {
				postUrlTask: '',//任务图片
			};
		},
		methods: {
			// 获取海报
			getPostUrl() {
				let qrcode = uni.getStorageSync('qrcode')
				let unit = this.taskType == 0 ? '元/小时' : this.taskType == 1 ? '元/件' : '元/天'
				let reward = this.reward.divide(100)
				let avatar = uni.getStorageSync('imgPath') + this.avatar
				console.log('海报组件~~~~~',avatar, this.userName, qrcode, this.taskName, reward, unit)
				this.createdPost(avatar, this.userName, qrcode, this.taskName, reward, unit)
			},
			
			// 创建画布
			createdPost (avatar, userName, qrcode, taskName, reward, unit) {
				console.log('画画')
				const ctx = uni.createCanvasContext('invitation-post') 
				//背景图片
				ctx.drawImage('/static/icon1/08.png', 0, 0, 305, 403)
				
				//蜜蜂日结logo
				ctx.setFillStyle('#402110')
				ctx.font="bold 20px PingFangSC-Medium";
				ctx.fillText('蜜蜂日结', 135, 40) 
				
				//说明
				ctx.setFillStyle('rgba(64,33,16,0.50)')
				ctx.font="14px PingFangSC-Regular";
				ctx.fillText('来自'+ userName +'的分享', 163/2, 90/2 + 25) 	
				
				// 工作名称
				ctx.setFillStyle('#402110')
				ctx.font="18px PingFangSC-Regular";
				ctx.fillText(taskName, 105/2, 115)
				
				// 工作报酬F39B19
				ctx.setFillStyle('#FF650C')
				// normal bold 18px arial,sans-serif
				ctx.font="normal bold 18px PingFangSC-Regular"
				ctx.fillText(reward+unit, 105/2, 145)
				
				//二维码
				ctx.drawImage(qrcode, 105/2, 310/2, 200, 200)
				
				//提示
				ctx.setFillStyle('#402110')
				ctx.font="14px PingFangSC-Regular";
				ctx.fillText('长按二维码保存至相册', 166/2, 726/2 + 20)
				
				//任务头像
				ctx.arc(55, 60, 15, 0, 2 * Math.PI)// 画圆
				ctx.clip()
				ctx.drawImage(avatar, 40, 45, 30, 30) 
				
				setTimeout(() => {
					console.log('画画2')
					ctx.draw(true, () => {
						console.log('画画3') 
						uni.canvasToTempFilePath({
							canvasId: 'invitation-post',
							success: (res) => {  
								console.log('画画4')
								this.postUrlTask = res.tempFilePath
								uni.setStorageSync('postUrlTask', res.tempFilePath)
								console.log('保存了海报postUrlTask', uni.getStorageSync('postUrlTask') )
							},
							fail: (err) => {
								console.log('画图失败', err)
							}
						})
					})
				}, 1000)
			},
		
		},
		mounted() {
			console.log('海报组件')
			this.getPostUrl()
		}
		
	}
</script>

<style>
	.container{
		z-index: 10;
	}
</style>
